import React, { useEffect, useState } from "react";
import {
  Form,
  Col,
  Input,
  Row,
  Button,
  Select,
  Divider,
  Modal,
  Table,
  Cascader,
  Space,
  Pagination,
} from "antd";
import { CheckCircleTwoTone, CheckOutlined } from "@ant-design/icons";
import axios from "axios";
import "./index.css";
const { Option } = Select;
/**
 * 处理data
 * @param {} props
 * @returns
 */
function manageData(exisData, newData) {
  const ids = [];
  if (Array.isArray(exisData)) {
    ids = exisData.map((item) => {
      return item.id;
    });
  }

  const nowData = newData.filter((item) => {
    if (!ids.includes(item.id)) {
      return item;
    }
  });
  return nowData;
}
function jsonOptions(methodGroups) {
  if (methodGroups.length < 1) {
    return [{ value: "", label: "默认做法", children: [] }];
  }

  return methodGroups.map((item) => {
    let childrens = item.options.map((opt) => {
      return {
        value: opt.id,
        label: opt.name,
      };
    });
    return {
      value: item.name,
      label: item.name,
      children: childrens,
    };
  });
}
/**
 * 过滤出已经选择的数据
 * TODO :
 */
function filterChoiceData(data) {
  console.log("传入data", data);

  let items = data.records.filter((item) => {
    return item.choice ? item : null;
  });
  items.filter((item) => {
    item.accessoryGroups.filter((accItem) => {
      if (accItem.options) {
        accItem.options = accItem.options.filter((opt) => {
          return opt.choice ? opt : null;
        });
      }
      return accItem;
    });
  });

  items.filter((item) => {
    item.methodGroups.filter((metItem) => {
      if (metItem.options) {
        metItem.options = metItem.options.filter((opt) => {
          return opt.choice ? opt : null;
        });
      }
      return metItem;
    });
  });

  return items;
}

/**
 * 模态框
 */
function CuiModel(props) {
  /**选择每页多少条纪律的状态值 默认每页显示10条纪律*/
  const [pageNum, setPageNum] = useState(5);
  /**选择第几页的状态值 默认显示第一页*/
  const [pageIndex, setPageIndex] = useState(1);
  const [data, setData] = useState({ records: [] });
  console.log("模态框拉取的菜品信息", data);
  const { store, dispatch } = props;

  console.log("store_________", store);

  /**
   * 拉去菜品信息列表
   * @returns
   */
  function queryCui(condition) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: "http://localhost:9101/product/search",
      data: {
        condition,
        pageIndex: pageIndex,
        pageSize: pageNum,
        // "sortFields":[{"field":"business_no","asc":true}],
      },
    }).then((data) => {
      /**
       * 查询出来过滤已选择菜品
       */
      data.data.records.map((item) => {
        item.choice = false;
        item.accessoryGroups.map((acc) => {
          acc.options.map((accOption) => {
            accOption.choice = false;
          });
          acc.choice = false;
        });
        item.methodGroups.map((met) => {
          met.options.map((metOption) => {
            metOption.choice = false;
          });
          met.choice = false;
        });
      });

      setData(data.data);
    });
  }

  const [isModalVisible, setIsModalVisible] = useState(false);
  useEffect(() => {
    setIsModalVisible(store.shopModelStatus);
    if (store.shopModelStatus) {
      queryCui();
    }
  }, [store.shopModelStatus]);
  useEffect(() => {
    queryCui();
  }, [pageIndex, pageNum]);

  const handleOk = () => {
    props.dispatch({ type: "changeShopModel", status: false });
  };

  const handleCancel = () => {
    props.dispatch({ type: "changeShopModel", status: false });
  };

  return (
    <>
      <Modal
        title="Cui Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={800}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <>
          <Row>
            <Col span={4}>选择</Col>
            <Col span={4}>菜品名</Col>
            <Col span={4}>菜品单价</Col>
            <Col span={4}>计量单位</Col>
            <Col span={8}>做法</Col>
          </Row>
          <Divider />
        </>
        {data.records.map((item) => {
          return (
            <>
              <Row>
                <Col span={4}>
                  <div
                    className={
                      item.choice ? "iconSelectYello" : "iconSelectGray"
                    }
                  >
                    <CheckOutlined
                      onClick={() => {
                        item.choice = !item.choice;
                        setData({ ...data });
                      }}
                    />
                  </div>
                </Col>
                <Col span={4}>{item.name}</Col>
                <Col span={4}>{item.unitPrice}</Col>
                <Col span={4}>{item.unitOfMeasure}</Col>
                <Col span={8}>
                  <Cascader
                    options={jsonOptions(item.methodGroups)}
                    placeholder="选择做法"
                    onChange={(e) => {
                      item.methodGroups.map((met) => {
                        met.options.map((opt) => {
                          opt.choice = false;
                          if (opt.id === e[1]) {
                            opt.choice = true;
                          }
                        });
                      });
                    }}
                  />
                  ,
                </Col>
              </Row>
              {item.accessoryGroups.map((itemAcc) => {
                return (
                  <>
                    {itemAcc.options.map((itemAccOption) => {
                      return (
                        <>
                          <Row>
                            <Col span={4} push={1}>
                              <div
                                className={
                                  itemAccOption.choice
                                    ? "iconSelectYello"
                                    : "iconSelectGray"
                                }
                              >
                                <CheckOutlined
                                  onClick={() => {
                                    itemAccOption.choice =
                                      !itemAccOption.choice;

                                    /**
                                     * 过滤出选择的  发送给父页面
                                     */

                                    setData({ ...data });
                                  }}
                                />
                              </div>
                            </Col>
                            <Col span={4}>{itemAccOption.name}</Col>
                            <Col span={4}>{itemAccOption.unitPrice}</Col>
                            <Col span={4}>{itemAccOption.unitOfMeasure}</Col>
                          </Row>
                        </>
                      );
                    })}
                  </>
                );
              })}
            </>
          );
        })}

        <Row>
          <Col span={8}> </Col>
          <Col span={8}>
            <Space>
              <span>&lt;&lt;</span>
              <Pagination
                size="small"
                total={data.totalCount}
                pageSize={pageNum}
                onChange={(num) => {
                  setPageIndex(num);
                }}
              />
              <span>&gt;&gt;</span>
            </Space>
          </Col>
          <Col span={8}>
            <span>每页</span>
            <input
              style={{ width: 35 }}
              defaultValue={pageNum}
              onChange={(e) => {
                setPageNum(e.target.value);
              }}
            />
            <span>条记录</span>
          </Col>
        </Row>
        <Row>
          <Divider />
          <Col span={6} push={12}>
            <Button
              style={{ width: "100%" }}
              /**回显页面数据 */
            >
              确认
            </Button>
          </Col>
          <Col span={6} push={12}>
            <Button
              style={{ width: "100%" }}
              onClick={() => {
                /**关闭弹窗 */
                dispatch({
                  type: "changeTableValues",
                  tableValues: filterChoiceData(data),
                });
                dispatch({ type: "changeShopModel", status: false });
              }}
            >
              取消
            </Button>
          </Col>
        </Row>
      </Modal>
    </>
  );
}
export default CuiModel;
